<template>
  <div class="app-container">
    <div style="width: 100%">
      <div class="module-div">
        <span>
          <ve-pie :data="chartData1" :settings="chartSettings1"/>
        </span>
        <span class="comment"> - 各部门员工人数统计【 总计 {{ totalEmployeeCount }} 人 】 - </span>
      </div>
      <hr>
      <div class="module-div">
        <span>
          <ve-histogram :data="chartData2" :settings="chartSettings2"/>
        </span>
        <span class="comment"> - 各部门员工在职情况统计【 在职： {{ workingCount }} 人, 退休： {{ retireCount }} 人, 离职： {{ quitCount }} 人 】 - </span>
      </div>
      <hr>

      <div class="module-div">
        <span>
          <ve-bar :data="chartData3" :settings="chartSettings3"/>
        </span>
        <span class="comment"> - 各部门性别情况统计 - </span>
      </div>
      <hr>

      <div class="module-div">
        <span>
          <ve-bar :data="chartData4" :settings="chartSettings4"/>
        </span>
        <span class="comment"> - 各部门年龄情况统计 - </span>
      </div>

    </div>

  </div>
</template>

<script>/* eslint-disable indent */

import { getEmployees } from '../../../../api/employee'

export default {

  data() {
    return {

      employeeList: [],
      listLoading: true,
      totalEmployeeCount: 0,
      workingCount: 0,
      retireCount: 0,
      quitCount: 0,

      // 各部门员工所占比例
      chartSettings1: {
        labelMap: {
          Depart: '部门名称',
          Count: '部门人数'
        }
      },
      chartData1: {
        columns: ['Depart', 'Count'],
        rows: []
      },

      // 各部门离职｜在职｜退休员工
      chartSettings2: {
        labelMap: {
          Depart: '部门名称',
          Working: '在职人数',
          Retire: '退休人数',
          Quit: '离职人数'
        }
      },
      chartData2: {
        columns: ['Depart', 'Working', 'Retire', 'Quit'],
        rows: []
      },

      // 各部门性别统计
      chartSettings3: {
        labelMap: {
          Depart: '部门名称',
          Male: '男性',
          Female: '女性'
        }
      },
      chartData3: {
        columns: ['Depart', 'Male', 'Female'],
        rows: []
      },

      // 各部门年龄统计
      chartSettings4: {
        labelMap: {
          Depart: '部门名称',
          Max: '最大年龄',
          Min: '最小年龄',
          Avg: '平均年龄'
        }
      },
      chartData4: {
        columns: ['Depart', 'Max', 'Min', 'Avg'],
        rows: []
      }
    }
  },
  created() {
    this.fetchEmployeeData()
  },
  methods: {

    fetchEmployeeData() {
      this.listLoading = true
      const that = this
      getEmployees(1, 20, false).then(response => {
        console.log(response.data)
        that.employeeList = response.data.data
        if (that.employeeList != null && that.employeeList.length > 0) {
          that.totalEmployeeCount = that.employeeList.length

          const map1 = new Map()
          const map2 = new Map()
          const map3 = new Map()
          const map4 = new Map()
          const chart1RowData = []
          const chart2RowData = []
          const chart3RowData = []
          const chart4RowData = []

          // 遍历数据生成图表
          that.employeeList.forEach(e => {
            // 1、员工部门分布
            if (!map1.has(e.department.name)) {
              map1.set(e.department.name, 1)
            } else {
              map1.set(e.department.name, map1.get(e.department.name) + 1)
            }

            // 2、员工工作状态统计
            if (!map2.has(e.department.name)) {
              map2.set(e.department.name, {
                'Working': 0,
                'Retire': 0,
                'Quit': 0
              })
            }
            if (e.state === 'WORKING') {
              map2.get(e.department.name).Working += 1
              that.workingCount += 1
            } else if (e.state === 'RETIRE') {
              map2.get(e.department.name).Retire += 1
              that.retireCount += 1
            } else if (e.state === 'QUIT') {
              map2.get(e.department.name).Quit += 1
              that.quitCount += 1
            }

            // 3、员工性别统计
            if (!map3.has(e.department.name)) {
              map3.set(e.department.name, { 'Male': 0, 'Female': 0 })
            }
            if (e.sex === '男') {
              map3.get(e.department.name).Male += 1
            } else if (e.sex === '女') {
              map3.get(e.department.name).Female += 1
            }

            // 4、员工年龄统计
            if (!map4.has(e.department.name)) {
              map4.set(e.department.name, { 'Max': 0, 'Min': 999, 'Count': 0, 'Total': 0 })
            }
            if (e.age > map4.get(e.department.name).Max) {
              map4.get(e.department.name).Max = e.age
            }
            if (e.age < map4.get(e.department.name).Min) {
              map4.get(e.department.name).Min = e.age
            }
            // 总人数加1
            map4.get(e.department.name).Count += 1
            // 总年龄累加
            map4.get(e.department.name).Total += e.age
          })

          map1.forEach((v, k) => chart1RowData.push({ 'Depart': k, 'Count': v }))
          map2.forEach((obj, k) => chart2RowData.push({
              'Depart': k,
              'Working': obj.Working,
              'Retire': obj.Retire,
              'Quit': obj.Quit
            }
          ))
          map3.forEach((obj, k) => chart3RowData.push({
              'Depart': k,
              'Male': obj.Male,
              'Female': obj.Female
            }
          ))
          map4.forEach((obj, k) => chart4RowData.push({
              'Depart': k,
              'Max': obj.Max,
              'Min': obj.Min,
              'Avg': (obj.Total / obj.Count).toFixed(2)
            }
          ))
          console.log(chart2RowData)

          that.chartData1.rows = chart1RowData
          that.chartData2.rows = chart2RowData
          that.chartData3.rows = chart3RowData
          that.chartData4.rows = chart4RowData
        }
        this.listLoading = false
      })
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .expanded_input {
    width: 555px;
  }

  .module-div {
    text-align: center;
    margin-bottom: 30px;
  }

  .comment {
    color: gray(25);
  }
</style>
